<template>
  <transition name="slide-fade">
    <li v-if="show">
      <b :class="'c-index-hot'+index">{{index}}</b>
      <a :title="list.title" target="_blank" :pdata="'index|jrrs|' + index" :href="list.titleurl" class="module-title-news">
        {{list.title}}
      </a>
    </li>
  </transition>
</template>


<script>
export default {
  props: {
    index: Number,
    list: {
      title: String,
      titleurl: String
    }
  },
  data () {
    return {
      show: true
    }
  }
}
</script>

<style lang="stylus" scoped>
.headline-list {
  li {
    margin 10px 0
    color #606060
    font-size 14px
    overflow hidden
    height 20px
    cursor pointer
  }
    b {
    font-weight 800
    text-align center
    width 15px
    margin-right 10px
    display: inline-block
    color #fff
    background-color #8eb9f5
    padding 2px 0
  }
  b.c-index-hot1 {
    background-color #F54542
  }
  b.c-index-hot2 {
    background-color #ff8547
  }
  b.c-index-hot3 {
    background-color #ffac38
  }
}
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>
